<template>
	<view class="food_detail">
		<view class="user_field">
			<view class="user_avatar">
				<image :src="user.avatarUrl" class="avatar_image"></image>
			</view>
			<i class="user_name">{{user.name}}</i>
		</view>
		<view class="collect_field">
			<collect :collectNum="food.article.favoriteNumber" :type="'f'" :mid="id" :uid="10001"></collect>
		</view>
		<view class="img_carosel">
			<swiper :interval="3000" :duration="1000" :indicator-dots="true" :autoplay="true" :circular="true">
				<swiper-item v-for="(item,index) in food.article.pictures" :key="index">
					<image :src="item.filePath" mode="aspectFill"></image>				
				</swiper-item>
			</swiper>
		</view>
		<view class="foods_attributes">
			<image src="../../../static/icons/fantuanicon-.png" class="attribute_icon"></image>
			<b class="foods_name">{{food.food.name}}</b>
			<view class="foods_price">￥{{food.food.price}}/份</view>
			<view class="foods_stars">
				<stars :light_num="food.food.index" :dark_num="5-food.food.index"></stars>
			</view>
			
			<h class="foods_describe">
				<p class="foods_shareReason">分享理由</p>
				{{food.food.reason}}
			</h>
			<view class="foods_tags">
				<tag :tagnum="food.food.labelObjects"></tag>
			</view>
			<view class="foods_location">
				<addresss :latitude="food.food.addressY" :longitude="food.food.addressX"></addresss>
				<distance :latitude="food.food.addressY" :longitude="food.food.addressX"></distance>
			</view>
		</view> 
		<view class="recommend_field">
			<image src="../../../static/icons/caipin.png" class="recommend_icon"></image>
			<h>相关推荐</h>
			<scroll-view  scroll-x="true" class="recommend_items" >
				<view class="recommend_item" v-for="(item,index) in recommends" :key="index">
					<image :src="item.article.pictures[0].filePath" class="recommend_item_img" @click="gotoRecDetail(item.foodArticleID)"></image>	
					<view class="recommend_item_describe">
						<i class="recommend_item_title">{{item.food.name}}</i>	
						<view class="recommend_star">
							<stars :light_num="item.food.index" :dark_num="5-item.food.index"></stars>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="comment_field">
			<comment :comments="food.article.articleComments" :type="'Food'" :fid="food.foodArticleID" :uid="10001"></comment>
		</view>
	</view>
</template>

<script>
	import stars from "../../../components/stars.vue"
	import tag from "../../../components/tag.vue"
	import collect from "../../../components/collect.vue"
	import comment from "../../comment/user-comment/comment.vue"
	import addresss from "../../../components/address.vue"
	import distance from "../../../components/distance.vue"
	export default {
		components:{
			stars,
			tag,
			collect,
			comment,
			addresss,
			distance
		},
		data(){
			return{			
				swipers:[
					{src:"../../../static/images/reganmian.png"},
					{src:"../../../static/images/reganmian2.webp"}
				],
				id:0,
				food:null,
				user:null,
				comments:[],
				tagnums:[],
				recommends:[]
			}
		},
		watch:{
			food(newVal,oldVal){
				this.getuser()
			}
		},
		methods:{
			async getFoodDetail(){
				const res=await this.$myRequest({
					url:'/FoodArticle/api/find/id='+this.id
				})
				console.log(res)
				this.food=res.data
				var that=this
				this.food.food.labelObjects.forEach(item=>{
					that.tagnums.push(item.label)
				})
				this.getRecommend()
			},
			async getuser(){
				const res=await this.$myRequest({
					url:'/User/api/find/id='+this.food.userID
				})
				this.user=res.data
			},
			async getRecommend(){
				console.log(this.food.food.labelObjects[0].label)
				const res=await this.$myRequest({
					url:'/FoodArticle/api/ListByLabel/lable='+this.food.food.labelObjects[0].label
				})
				this.recommends=res.data
				var that=this
				var arr=this.recommends.filter((item)=>{
					return item.foodArticleID!=that.food.foodArticleID
				})
				this.recommends=arr
				console.log(this.recommends)
			},
			gotoRecDetail(id){
				uni.navigateTo({
					url:'/pages/details/food-details/detail?id='+id
				})
			}
		},
		onLoad(options){
			this.id=options.id
			this.getFoodDetail()
		}
	}
</script>

<style lang="less">
	.user_field{
	float:left;
		min-width: 80%;
		height:32px;
		.user_avatar{
			border:1px solid #eee;
			border-radius:50%;
			height:32px;
			width:32px;
			margin-left: 8px;
			margin-right: 8px;
			float: left;
			.avatar_image{
				height: 100%;
	            width:100%;
	            border-radius:50%;
	            background-color: #eee;
			}
		}
		.user_name{
			font-size: 14px;
			line-height: 32px;
		}
	}
	.collect_field{
		height:32px;
	}
	.img_carosel{
		margin-top: 10px;
		swiper{
			height: 300px;
			image{
			width:100%;
			height:300px;
			}
		}
	}
	.foods_attributes{
		margin-top: 10px;
		margin-left:8px;
		.attribute_icon{
			width:50rpx;
			height:50rpx;
			float: left;

		}
		.foods_name{
			display: inline-block;
			margin-right: 12px;
			float:left;
			font-size: 22px;
			font-weight: 600;
			letter-spacing: 2px;
		}
		.foods_price{
			display: inline-block;
			margin-right: 10px;
			float:left;
			font-size: 15px;
			line-height: 30px;
			font-weight: 400;
		}
		.foods_stars{	
			margin-top:10px;
			padding-top: 5px;
			height:30px;
			
		}
		.foods_shareReason{
			height: 35rpx;
			width: 100rpx;
			background-color: #F0AD4E;
			font-size: 12px;
			line-height: 20px;
			text-align: center;
			float:left;
			
		}
		.foods_describe{
			margin-top: 12px;
			margin-bottom: 8px;
			display: inline-block;
			font-size: 15px;
		}
		.foods_tags{
			margin-top: 10px;
			font-size: 12px;
			color:#DD524D;
		}
		.foods_location{
			margin-top:10px;
		}	
		
	}
	.recommend_field{
		margin-top:20px;
		padding-left:10px;
		.recommend_icon{
			width:50rpx;
			height:50rpx;
			float: left;
		}
		.recommend_items{
			width:100%;
			height:210px;
			white-space: nowrap; 
		}
		.recommend_item{
			border-radius: 5%;
			border:1rpx solid #DCDFE6;
			background-color: #fff;
			margin-top:10px;
			margin-right: 10px;
			display: inline-block;
			width:150px;
			height:200px;
			.recommend_item_img{
				height:140px;
				width:100%;	
			}
		}
		.recommend_item_describe{
			align-items: center;
			.recommend_star{
				padding-left:43px;
			}
		}
		i{
			text-align: center;
			font-size: 16px;
			color: #ffaa00;
			font-weight: 550;
		}
	}
	.comment_field{
		margin-top: 30px;
	}
	
</style>
